import React, { useEffect, useState } from 'react'
import { useSelector, useDispatch } from "react-redux";
import { Button, Space, Table } from 'antd';
import { asyncPartaQuery, asyncPartaAdd } from '../reducers/partaInfoReducer';
import Dialog from '../components/Dialog';
const columns = [
    {
        title: '甲方姓名',
        dataIndex: 'partaname',
        key: 'partaname',
    },
    {
        title: '电话',
        dataIndex: 'tel',
        key: 'tel',
    },
    {
        title: '日期',
        dataIndex: 'date',
        key: 'date',
    },
    {
        title: '操作',
        key: 'action',
        render: (_, record) => (
            <Space size="middle">
                <Button type='primary'> 删除</Button>
            </Space >
        ),
    }
]

export default function Parta() {
    let data = useSelector(store => store.partaInfo.partaList)
    let dispatch = useDispatch();
    useEffect(() => {
        if (!data.length) {
            dispatch(asyncPartaQuery())
        }
    })
    const [open, setOpen] = useState(false);

    const showModal = () => {
        setOpen(true);
    };
    function operate(data) {
        dispatch(asyncPartaAdd(data))
    }
    let info = [
        {
            msg: "甲方姓名",
            type: 'partaname',
            rules: [
                {
                    required: true,
                    message: '甲方姓名不能为空'
                }
            ]
        },
        {
            msg: "甲方电话",
            type: 'tel',
            rules: [
                {
                    required: true,
                    message: '甲方电话不能为空'
                }
            ]
        },
        {
            msg: "日期",
            type: 'date',
            rules: [
                {
                    required: true,
                    message: '日期不能为空'
                }
            ]
        }
    ]
    return (
        <div style={{ textAlign: 'start' }}>
            <Dialog
                title={'新增甲方'}
                open={open}
                setOpen={setOpen}
                operate={operate}
                info={info}
            />
            <Button type='primary' onClick={showModal} >新增甲方</Button>
            <Table columns={columns} dataSource={data} rowKey={(record) => record._id} pagination={{ pageSize: 7 }} />
        </div>
    )
}
